@import '@/assets/css/variable.scss'; // css变量


$icon-list:(
  recipes-food-type0: recipes-food-type0,
  recipes-food-type1: recipes-food-type1,
  recipes-food-type2: recipes-food-type2,
  recipes-food-type3: recipes-food-type3,
  publish-btn: publish-btn,
) !default;

@each $key,$val in $icon-list {
  .icon-#{$key}{
    background-image:url("../#{$imgUrl}/recipes/icon-#{$val}.png") !important;
  }
}

// 食物 模块
.recipes-list-box{
  margin-bottom: .3rem;
  color: #fff;
  text-align: left;
  box-sizing:border-box;
  // background: rgb(211, 211, 28);

  .recipes-list-item{
    position:relative;
    display: inline-block;
    padding: .056rem .296rem;
    //margin-right: .148rem;
    margin-right: .4rem;
    margin-top:.22rem;
    height:.48rem;
    line-height:.48rem;
    background: $mainColor;border-radius: 2rem;
    box-shadow: 0 7px 10px #ffc8be;
    font-size: .26rem;
    $iconWH:.296rem;
    .icon{
      position:absolute; top: -.11rem; right: -.074rem;
      padding:0; margin:0;
      width: $iconWH;height: $iconWH;

      text-align: center; line-height: $iconWH; font-weight: bold; font-size: .3rem;
      font-style: normal;

      border-radius: 50%; background: #ffbd0c;
    }
  }
  .recipes-not-selected-item{
    font-size: .26rem;
    color:#333333;
    position:relative;
    display: inline-block;
    padding: .16rem .32rem; margin-right: .4rem; margin-top:.2rem;
    height:.3rem;
    line-height:.3rem;
    background: $bgColor1;border-radius: 2rem;
    border: 2px solid #F5F6F9;
  }
}

// 时间轴
.axis-box{
  margin-top: .37rem;padding-top: .37rem;
  background:#fff;

  .axis-item{
    position:relative;
    text-align:left;

    &:first-child{
      margin-top: .37rem;
    }
    .content-module{
      margin-left: .83rem;
      font-size: .3rem;

      .food-box{
        padding: .4rem 0;
        color: #9E9E9E; font-size: .3rem;
        >li{
          padding: 0 .11rem;
          &:first-child{
            padding-left: 0;
          }
        }
      }
    }

    $pointerWH: .37rem;
    .pointer{
      position:absolute; top: 0rem; left: .28rem;
      width: $pointerWH; height: $pointerWH;
      border-radius: 50%;
    }
  }
}
